<template>
  <el-container v-loading="loading">
      <el-main>
        <div class="main-container" 
            :style="{
              boxShadow: `--el-box-shadow-dark`
            }"
          >
            <v-expand-x-transition>
              <div class="timeline">
                <transition name="slide-in-from-left" appear side="start">
                  <img width="100%" src="/static/imgs/milestone.jpg"/>
                </transition>

              </div>
            </v-expand-x-transition>
          </div>
          <div class="chart-container">
            <div class="select">
              <div class="select-item">
                <el-select
                  v-model="selectedChartType"
                  placeholder="Select Chart Type"
                  size="large"
                  style="width: 100%; z-index: 999;"
                  @change="handleChartSelectChange"
                >
                  <el-option
                    v-for="item in chartOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>    
              </div>
              <div class="select-item">
                <el-select
                  v-model="selectedValue"
                  placeholder="Select Classification Method"
                  size="large"
                  style="width: 100%; z-index: 999;"
                  @change="handleSelectChange"
                >
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div v-if="selectedChartType == 'pie'" class="chart">
              <v-chart class="chart" :option="pieOption" autoresize @click="handleChartClick" />
            </div>
            <div v-if="selectedChartType == 'bar'" class="chart">
              <v-chart class="chart" :option="barOption" autoresize />
            </div>
          </div>
          <div class="table">
            <Data />
          </div>
          <!-- <RevolverMap /> -->
      </el-main>
  </el-container>

</template>

<script lang="ts" setup name="Home">
    import * as echarts from 'echarts';
    import { onBeforeMount, ref, onMounted  } from 'vue';

    import { use } from 'echarts/core';
    import { CanvasRenderer } from 'echarts/renderers';
    import { PieChart } from 'echarts/charts';
    import {
        TitleComponent,
        TooltipComponent,
        LegendComponent,
    } from 'echarts/components';
    import VChart, { THEME_KEY } from 'vue-echarts';
    import { post } from '../../axios/api';
    import { ElMessage } from 'element-plus'
    import Data from '@/pages/data/Data.vue'
    import RevolverMap from '@/components/RevolverMap.vue';
    import { useRouter } from 'vue-router';

    use([
        CanvasRenderer,
        PieChart,
        TitleComponent,
        TooltipComponent,
        LegendComponent,
    ]);

    let loading = ref(false);
    let attribute = ref("experiment_type");
    let selectedValue = ref("experiment_type");
    let selectedChartType = ref("pie")
    const router = useRouter()
    const isMobile = ref(window.innerWidth <= 768)


    const typeOptions = [
      { value: 'experiment_type', label: 'Experiment Type' },
      { value: 'sample_type', label: 'Sample Type' },
    ]

    const chartOptions = [
      { value: 'bar', label: 'bar' },
      { value: 'pie', label: 'pie' },
    ]

    // 饼图
    let pieOption = ref({
        // title: {
        //     text: 'All Data',
        //     left: '55%',
        // },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
            orient:  isMobile ? 'horizontal' : 'vertical',
            right: '0',
            top: isMobile ? '90%' : '25%',
            data: [],
            type: 'scroll',
            pageIconSize: 10,
            formatter: function (name:string) {
              return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
            },
            //开启tooltip
            tooltip: {
              show: true
            },
        },
        series: [
            {
              name: attribute.value,
              type: 'pie',
              minAngle: 20,
              radius: '60%',
              center: ['45%', '55%'],
              data: [],
              emphasis: {
                  itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
              },
              itemStyle: {
                normal: {
                  color: function(params: any) {
                    const colorList: any = {
                      'scHi-C': '#fabb6e',
                      'scHi-C+': '#fc8001',
                      'snHi-C': '#acdc88',
                      'snHi-C+': '#379e32',
                      'sciHi-C': '#c5a855',
                      'sn-m3C': '#00aad6',
                      'scMethyl': '#00aad6',
                      'HiRES': '#00a8aa',
                      'Dip-C': '#b17dbf',
                      'scSPRITE': '#b6b5d7',
                      'scNanoHi-C': '#8482b9',
                      'LiMAC': '#65aee0',
                      'GAGE-seq': '#c4d2d4',
                      'Paired': '#5a8ca7',
                      'Droplet': '#d3a5a5',
                    };
                    const colors = ['#fabb6e', '#fc8001', '#acdc88', '#379e32', '#c5a855', '#89b5cb', '#00aad6', '#00a8aa', '#b17dbf', '#b6b5d7', '#8482b9', '#65aee0', '#c4d2d4', '#5a8ca7', '#d3a5a5']
                    return params.name in colorList ? colorList[params.name] : colors[Math.floor(Math.random()*10)]
                  }
                }
              }
            },
        ],
    });

    let barOption = ref({
      xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
          interval: 0, // 每个标签都显示
          rotate: 30
        }
      },
      yAxis: {
        type: 'log'
      },
      series: [
        {
          data: [],
          type: 'bar',
          itemStyle: {
            normal: {
              color: function(params: { name: string; }) {
                const colorList: any = {
                  'scHi-C':'#fabb6e',
                  'scHi-C+':'#fc8001',
                  'snHi-C':'#acdc88',
                  'snHi-C+':'#379e32',
                  'sciHi-C':'#c5a855',
                  'sn-m3C':'#89b5cb',
                  'scMethyl' :'#00aad6',
                  'HiRES':'#00a8aa',
                  'Dip-C':'#b17dbf',
                  'scSPRITE':'#b6b5d7',
                  'scNanoHi-C':'#8482b9',
                }
                const colors = ['#fabb6e', '#fc8001', '#acdc88', '#379e32', '#c5a855', '#89b5cb', '#00aad6', '#00a8aa', '#b17dbf', '#b6b5d7', '#8482b9']
                return params.name in colorList ? colorList[params.name] : colors[Math.floor(Math.random()*10)]
              }
            }
          }
        }
      ]
    })

    function handleChartClick(params: any) {
      router.push({
          name:'data',
          params: {
            experimentType: params.seriesName == 'experiment_type' ? params.data.name : 'none',
            sampleType: params.seriesName == 'sample_type' ? params.data.name : 'none',
          }
      })
    }



    async function getGroupData(attribute: String) {
        let data = {
          attribute,
        }
        let res:any = {}
        loading.value = true
        try {
            res = await post('/get_data_by_group/', data)
            if (res && res.success) {
                loading.value = false
                pieOption.value.series[0].data = res.data
                pieOption.value.legend.data = res.keys
                barOption.value.series[0].data = res.data.map((ele: { value: any; }) => ele.value)
                barOption.value.xAxis.data = res.keys
                // barOption.value.xAxis.type = attribute
            }
        } catch (error:any) {
            loading.value = false
            ElMessage({
                message: error,
                type: 'error',
            })
        }
    }

    function handleSelectChange(val: any) {
      attribute.value = val
      pieOption.value.series[0].name = attribute.value
      getGroupData(val)
    }

    function handleChartSelectChange(val: any) {
      selectedChartType.value = val
    }

    onMounted(() => {
      getGroupData("experiment_type")
    })
</script>

<style scoped>
    .timeline {
      width: 100%;
    }
    
    .card {
      float: inline-start;
    }

    .card-author {
      margin-bottom: 10px;
    }

    .chart {
        height: 70vh;
        width: 100%;
    }
    .chart-container {
      width: 100%;
      display: flex;
      background-color: white;
      border: 1px solid var(--el-border-color);
      box-sizing:border-box;
      border-radius: 5px;
      padding: 10px;
      margin-top: 20px;
    }
    .main-container {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      background-color: #F3F5FA;
      border: 1px solid var(--el-border-color);
      box-sizing:border-box;
      border-radius: 5px;
      padding: 10px;
      /* box-shadow:var(2px 2px 7.7px 0px rgba(146, 159, 202, 0.19), 0px 0px 1px 1px rgba(255,255,255,0.45)inset) */
    }

    .table {
      width: 100%;
      background-color: #F3F5FA;
      border: 1px solid var(--el-border-color);
      box-sizing:border-box;
      border-radius: 5px;
      padding: 10px;
      margin-top: 20px;
    }

    .select {
      margin: 5px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      z-index: 0;
    }

    .select-item {
      width: 200px;
      margin: 5px;
    }

    .slide-in-from-left-enter-active,
    .slide-in-from-left-leave-active {
      transition: transform 1s, opacity 1s;
    }

    .slide-in-from-left-enter-from,
    .slide-in-from-left-leave-to {
      transform: translateX(-100%);
      opacity: 0;
    }

    .slide-in-from-left-enter-to,
    .slide-in-from-left-leave-from {
      transform: translateX(0);
      opacity: 1;
    }
    

    @media (max-width: 768px) {
        .chart-container {
          display: block;
          width: 100%;
        }

        .chart {
            height: 70vh;
            width: 100%;
        }

        .select {
          float: right;
          width: 50%;
        }

        .select-item {
          width: 150px;
        }
    }
    
    /* .v-timeline-divider__inner-dot {
      background-color: transparent !important;    
      } */
</style>